<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .box1 {
      width: 200px;
      height: 200px;
      background-color: pink;
    }

    .box1 .box2 {
      width: 180px;
      height: 180px;
      background-color: red;
    }
  </style>

  <body>
    <div class="box1">
      <div class="box2">
          <a href="https://baidu.com" class="link">baidu</a>
          <form>
            <input type="text" class="inp">
          </form>
          <form class="checkbox">
            <label for="d-checkbox">复选框:</label>
            <input type="checkbox" id="id-checkbox">
          </form>    
      </div>
    </div>
    <script>
      const box1 = document.getElementsByClassName("box1")[0]
      const box2 = document.getElementsByClassName("box2")[0]
      const a = document.querySelector(".link")
      const inp = document.querySelector(".inp")
      const checkbox = document.querySelector(".checkbox")
      /*
      stopPropagation:阻止事件冒泡，对默认事件无影响
      preventDefault():阻止默认事件，和事件冒泡无关
      event.defaultPrevented​​​属性。布尔值表明是否在元素中调用了​​event.preventDefault()​​
      在锚元素中使用，它将阻止其导航
    */

      box1.addEventListener("click", () => {
        console.log(1)
      })
      box2.addEventListener("click", (e) => {
        console.log(2)
        // e.stopPropagation()
        // console.log("preventDefault执行前:", e.defaultPrevented) // false
        // e.preventDefault()
        // console.log("preventDefault执行后:", e.defaultPrevented) // true
      })
      a.onclick = function(){
        console.log('a')
        // e.preventDefault()
      }
      inp.addEventListener('keypress', (e) => {
        console.log('inp')
        // e.preventDefault()
      })
      checkbox.onclick = function(){
        console.log('checkbox')
        // e.preventDefault()
      }
    </script>
  </body>
</html>
